<template>
  <div class="item-box w-1/4 h-full mx-2 px-2 pl-5 pt-4
  rounded-lg transition shadow hover-effect
  ease-in-out  " :style="item.bgc">
    <div class="content">
      <span class="title block font-black pt-2.5">
        <i :class="['iconfont', item.iconfont, 'mr-2']" :style="{ fontSize: '14px', color: item.color }"/>{{item.title }}</span>
    </div>

    <div class="w-11/12 h-4/5 flex items-center justify-between ml-6">
      <div class="w-1/2" style="line-height: 3.6">
        <div class="num block text-4xl font-bold ">{{ item.qty }}<span style="font-size: 13px;padding-left: 10px">{{ item.unit }}</span></div>
        <div class="flex">
          <span class="num text-slate-400">{{ $t('common.toYesterday') }}</span>&nbsp;&nbsp;
          <span class="num block " :class="item.qty > item.yesterdayQty ? 'text-red-600' : 'text-green-600'">{{ getNum() }}</span>&nbsp;&nbsp;
          <i v-if="item.qty > item.yesterdayQty" class="iconfont icon-shangsheng  text-red-600" style="font-size: 12px"/>
          <i v-else class="iconfont icon-xiajiang  text-green-600" style="font-size: 12px"/>
        </div>

      </div>
      <div class="w-2/5 h-full" v-if="item.type!='four'">
        <v-chart ref="currentRef"/>
      </div>
      <div class="w-2/5 h-full item-imgBox" v-else>

        <v-chart ref="currentRef" v-if="!item.materialTypeList"/>
        <img class="img-bx" v-else src="../../../images/img-8.png"/>

      </div>


    </div>
  </div>
</template>

<script setup>
import '@/assets/font/iconfont.css'
import { defineProps, onMounted, ref, watch, nextTick } from 'vue'


const props = defineProps({
  item: {
    type: Object,
    required: true
  },

})
const currentRef = ref()
const renderOption = (option) => {
  return {
    xAxis: {
      type: 'category',
      show: false  // 隐藏横坐标
    },
    yAxis: {
      type: 'value',
      show: false  // 隐藏横坐标
    },
    series: [
      {
        data: props.item.list,
        type: 'line',
        smooth: true,
        symbol: 'none', // 不显示数据点
        itemStyle: {
          color: '#0e56f8'  // 设置折线颜色
        },
      },
      // {
      //   data: [25, 54, 1031, 1591, 1201, 704, 1490, 1934, 1390, 1020, 3000, 2650],
      //   type: 'line',
      //   smooth: true,
      //   symbol: 'none', // 不显示数据点
      //   itemStyle: {
      //     color: '#71a2e3'  // 设置折线颜色
      //   },
      //   lineStyle: {
      //     type: 'dashed', // 设置为虚线
      //     width: 1        // 设置线条宽度
      //   }
      // }
    ]
  }

}
const renderOptionTow = (option) => {
  return {
    xAxis: [
      {
        type: 'category',
        show: false  // 隐藏横坐标
      }
    ],
    yAxis: [
      {
        type: 'value',
        show: false  // 隐藏横坐标
      },

    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        data: props.item.list,
        itemStyle: {
          color: '#2cab40', // 设置折线颜色
          borderRadius: [5, 5, 5, 5]  // 设置圆角
        }
      },
      // {
      //   name: 'Precipitation',
      //   type: 'bar',
      //   data: [123, 181, 393, 264, 287, 170.7],
      //   itemStyle: {
      //     color: '#86df6c',  // 设置折线颜色
      //     barBorderRadius: [5, 5, 5, 5]  // 设置圆角
      //   }
      // },

    ]
  }

}
const renderOptionFour = (option) => {

  return {
    legend: {
      orient: 'vertical',  // 设置图例为竖直排列
      itemWidth: 8,      // 图例图标宽度
      itemHeight: 8,     // 图例图标高度
      right: '0%',
      top: '5%',
      itemStyle: {
        fontSize: 10,      // 字体大小
        // borderColor: '#fff', // 设置边框颜色
        borderWidth: 0        // 设置边框宽度
      },

    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        center: ['30%', '40%'],  // 调整圆心位置，向左移动
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: false  // 不显示强调状态的标签
        },
        labelLine: {
          show: false
        },
        data :props.item.list,
        // data: [
        //   {
        //     value: 1048,
        //     name: '上基材',
        //     itemStyle: { color: '#8d4eda' }
        //   },
        //   {
        //     value: 735,
        //     name: '发泡板',
        //     itemStyle: { color: '#00b2ff' }
        //   },
        //   {
        //     value: 580,
        //     name: '贴合板',
        //     itemStyle: { color: '#165dff' }
        //   },
        // ]
      }
    ]
  }
}

const getNum = () => {
    const difference = props.item.qty > props.item.yesterdayQty
        ? props.item.qty - props.item.yesterdayQty
        : props.item.yesterdayQty - props.item.qty;
    return difference.toFixed(2);
};

// 添加 watch 来监听数据变化
watch(
  () => props.item.list,
  (newVal) => {
    if (newVal && currentRef.value) {
      nextTick(() => {
        if (props.item.type === 'tow') {
          if(currentRef.value){
            currentRef.value.setOption(renderOptionTow())
          }
        } else if (props.item.type === 'four') {
          if(currentRef.value){
            currentRef.value.setOption(renderOptionFour())
          }
        } else {
          if(currentRef.value){
            currentRef.value.setOption(renderOption())
          }
        }
      })
    }
  },
  { deep: true }
)

onMounted(() => {

  console.log(currentRef.value,'currentRef.value')
  if (currentRef.value) {
    if (props.item.type === 'tow') {
      currentRef.value.setOption(renderOptionTow())
    } else if (props.item.type === 'four') {
      currentRef.value.setOption(renderOptionFour())
    } else {
      currentRef.value.setOption(renderOption())
    }

  }

})

</script>

<style scoped lang="scss">
.item-imgBox{
  position: relative;
  .img-bx{
    position: absolute;
    width: 70%;
    right: 10px;
    top: 40%;
    transform: translateY(-50%); /* 垂直居中 */
  }
}

.hover-effect:hover{
  transform: scale(1.03);
}
</style>
